@extends('admin.layout.base')
@section('styles')
    <style>
        .el-button--info.is-plain{
        	margin-top: 15px;
		    float: left;
		    padding: 8px;
        }
    </style>
@endsection
@section('content')

    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 基本信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="标题：" prop="title" :rules="[{ required: true, message: '请填写标题', trigger: 'blur'}]">
                        <el-input clearable v-model="form.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="任务类别：" prop="pttype_id" :rules="[{ required: true, message: '请选择任务类别', trigger: 'blur'}]">
                        <el-cascader
                                placeholder="请选择任务类别"
                                separator=">"
                                :options="types"
                                expand-trigger="hover"
                                v-model="form.pttype_id">
                        </el-cascader>
                    </el-form-item>
                    
                    <el-form-item label="任务分类：" prop="cate_id" :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]">
                        <el-cascader
                                placeholder="请选择任务分类"
                                separator=">"
                                :options="categoys"
                                expand-trigger="hover"
                                v-model="form.cate_id">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="总赏金：" prop="price" :rules="[{ required: true, message: '请填任务赏金', trigger: 'blur'}]">
                        <el-input clearable v-model="form.price" placeholder="请填任务赏金"  style="width:200px"></el-input>
                    </el-form-item>
                    <el-form-item label="需求区域：" prop="area" :rules="[{ required: true, message: '请填写需求区域', trigger: 'blur'}]">
                        <el-cascader placeholder="请选择需求区域" :options="areas" v-model="form.area"></el-cascader>
                    </el-form-item>
                    <el-form-item label="开始时间：" prop="start_at" :rules="[{ required: true, message: '请选择任务开始时间', trigger: 'blur'}]">
                        <el-date-picker v-model="form.start_at" type="datetime" @change="start_at" placeholder="任务开始时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="截止时间：" prop="end_at" :rules="[{ required: true, message: '请选择任务截止时间', trigger: 'blur'}]">
                        <el-date-picker v-model="form.end_at" type="datetime" @change="end_at" placeholder="任务截止时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="任务时限：" prop="mission_limit" :rules="[{ required: true, message: '请填任务时限', trigger: 'blur'}]">
                         <el-input clearable type="number" v-model="form.mission_limit" placeholder="请填写任务时限" style="width:200px"></el-input>
                         <span style="color:red">单位：小时</span>
                        
                    </el-form-item>
                    <el-form-item label="需求描述：" prop="content" :rules="[{ required: true, message: '请填写需求描述', trigger: 'blur'}]">
                       
                         <el-input type="textarea" rows="3" v-model="form.content"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="任务总数：" prop="number">
                        <el-input clearable type="number" v-model="form.number" placeholder="请填任务总数"  style="width:200px"></el-input>
                    </el-form-item>
                    
                  
                </div>
                
                <div class="panel-header"> 
                	<div class="panel-title"> 步骤信息</div> 
                	<div slot="tip" class="el-upload__tip" style="color:red">图片大小不能超过 2MB，建议尺寸2:3</div>
                </div>
                <div class="panel-main">
                    <el-form-item label="第一步描述：" prop="step1_desc">
                        <el-input type="textarea" rows="3" v-model="form.step1_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="示例图：" prop="step1_image">
                                <el-upload
                                		ref="upload1"
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadStep1Success"
                                        :before-upload="uploadBefore">
                                    <img v-if="form.step1_image" :src="form.step1_image" class="img-uploader step1_image-img">
                                    <i v-else class="el-icon-plus step1_image-uploader-icon"></i> 
                                                                     
                                </el-upload> 
                                <el-button v-if="form.step1_image != ''" @click="destroy()" icon="fa fa-trash" type="info" plain>删除</el-button>                          
                     </el-form-item>
                    
                    
                    <el-form-item label="第二步描述：" prop="step2_desc">
                        <el-input type="textarea" rows="3" v-model="form.step2_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="示例图：" prop="step1_image">
                                <el-upload
                                		ref="upload2"
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadStep2Success"
                                        :before-upload="uploadBefore">
                                    <img v-if="form.step2_image" :src="form.step2_image" class="img-uploader step2_image-img">
                                    <i v-else class="el-icon-plus step2_image-uploader-icon"></i>
                                    
                                </el-upload>
                                <el-button v-if="form.step2_image != ''" @click="destroy2()" icon="fa fa-trash" type="info" plain>删除</el-button>   
                     </el-form-item>
                    
                    <el-form-item label="第三步描述：" prop="step3_desc">
                        <el-input type="textarea" rows="3" v-model="form.step3_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="示例图：" prop="step3_image">
                                <el-upload
                                		ref="upload3"
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadStep3Success"
                                        :before-upload="uploadBefore">
                                    <img v-if="form.step3_image" :src="form.step3_image" class="img-uploader step3_image-img">
                                    <i v-else class="el-icon-plus step3_image-uploader-icon"></i>
                                    
                                </el-upload>
                                <el-button v-if="form.step3_image != ''" @click="destroy3()" icon="fa fa-trash" type="info" plain>删除</el-button>
                     </el-form-item>
                     
                     <el-form-item label="第四步描述：" prop="step4_desc">
                        <el-input type="textarea" rows="3" v-model="form.step4_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="示例图：" prop="step4_image">
                                <el-upload
                                		ref="upload4"
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadStep4Success"
                                        :before-upload="uploadBefore">
                                    <img v-if="form.step4_image" :src="form.step4_image" class="img-uploader step4_image-img">
                                    <i v-else class="el-icon-plus step4_image-uploader-icon"></i>
                                    
                                </el-upload>
                                <el-button v-if="form.step4_image != ''" @click="destroy4()" icon="fa fa-trash" type="info" plain>删除</el-button>
                     </el-form-item>
                     
                     <el-form-item label="第五步描述：" prop="step5_desc">
                        <el-input type="textarea" rows="3" v-model="form.step5_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="示例图：" prop="step5_image">
                                <el-upload
                                		ref="upload5"
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadStep5Success"
                                        :before-upload="uploadBefore">
                                    <img v-if="form.step5_image" :src="form.step5_image" class="img-uploader step5_image-img">
                                    <i v-else class="el-icon-plus step5_image-uploader-icon"></i>
                                    
                                </el-upload>
                                <el-button v-if="form.step5_image != ''" @click="destroy5()" icon="fa fa-trash" type="info" plain>删除</el-button>
                     </el-form-item>
                     
                     
                     <el-form-item label="第六步描述：" prop="step6_desc">
                        <el-input type="textarea" rows="3" v-model="form.step6_desc"></el-input>
                    </el-form-item>
                    <el-form-item label="示例图：" prop="step6_image">
                                <el-upload
                                		ref="upload6"
                                        :action="upload_image"
                                        :show-file-list="false"
                                        name="image"
                                        :limit="1"
                                        :on-success="uploadStep6Success"
                                        :before-upload="uploadBefore">
                                    <img v-if="form.step6_image" :src="form.step6_image" class="img-uploader step6_image-img">
                                    <i v-else class="el-icon-plus step6_image-uploader-icon"></i>
                                    
                                </el-upload>
                                <el-button v-if="form.step6_image != ''" @click="destroy6()" icon="fa fa-trash" type="info" plain>删除</el-button>
                     </el-form-item>
                     
                     <el-form-item label="审核状态：" prop="status">
                        <el-radio-group  v-model="form.status">
                            <el-radio :label="2" border>驳回</el-radio>
                            <el-radio :label="3" border>通过</el-radio>
                          
                        </el-radio-group>
                    </el-form-item>
                     
                     <el-form-item label="是否推荐：" prop="is_recommend">
                        <el-radio-group  v-model="form.is_recommend">
                            <el-radio :label="0" border>非推荐</el-radio>
                            <el-radio :label="1" border>推荐</el-radio>
                          
                        </el-radio-group>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">确 定</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        date:null,
                        info: {!! $info !!},
                        upload_image: UPLOAD_IMAGE,
                        form: {
                            id: " {{ $id }}",
                            cate_id: '',
                            pttype_id: '',
                            title: '',
                            content: '',
                            area: 0,
                            price: 0,
                            start_at:'',
                            end_at: '',                                                  
                            number: 0,
                            view: 0,
                            type: 2,
                            status: 0,
                            unit:'',
                            mission_limit:'',
                            step1_desc:'',
                            step1_image:'',
                            step2_desc:'',
                            step2_image:'',   
                            step3_desc:'',
                            step3_image:'',   
                            step4_desc:'',
                            step4_image:'',   
                            step5_desc:'',
                            step5_image:'',
                            step6_desc:'',
                            step6_image:'',                            
                        },                      
                        categoys: {!! $categorys !!},
                        areas: {!! $areas !!},
                        types:{!! $types !!}
                    }
                },
                created() {
                   
                    let that = this;
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            cate_id: this.info.cate_id,
                            title: this.info.title,
                            content: this.info.content,
                            area: this.info.area,
                            price: this.info.price,
                            start_at: this.info.start_at,
                            end_at: this.info.end_at,
                            mission_limit:this.info.mission_limit,
                            number: this.info.number,
                            view: this.info.view,
                            pttype_id:this.info.pttype_id,
                            type: this.info.type,
                            status: this.info.status,
                            unit:this.info.unit,
                            step1_desc:this.info.step1_desc,
                            step1_image:this.info.step1_image,
                            step2_desc:this.info.step2_desc,
                            step2_image:this.info.step2_image,
                            step3_desc:this.info.step3_desc,
                            step3_image:this.info.step3_image,
                            step4_desc:this.info.step4_desc,
                            step4_image:this.info.step4_image,
                            step5_desc:this.info.step5_desc,
                            step5_image:this.info.step5_image,
                            step6_desc:this.info.step6_desc,
                            step6_image:this.info.step6_image,
                        };
                       
                    }
                    
                },
                
                methods: {
                	uploadStep1Success(res) {
                        this.form.step1_image = res.data.path;
                        this.$refs.upload1.clearFiles();
                    },
                    uploadStep2Success(res) {
                        this.form.step2_image = res.data.path;
                        this.$refs.upload2.clearFiles()
                    },
                    uploadStep3Success(res) {
                        this.form.step3_image = res.data.path;
                        this.$refs.upload3.clearFiles()
                    },
                    uploadStep4Success(res) {
                        this.form.step4_image = res.data.path;
                        this.$refs.upload4.clearFiles()
                    },
                    uploadStep5Success(res) {
                        this.form.step5_image = res.data.path;
                        this.$refs.upload5.clearFiles()
                    },
                    uploadStep6Success(res) {
                        this.form.step6_image = res.data.path;
                        this.$refs.upload6.clearFiles()
                    },
                    
                    destroy(){
                    	this.form.step1_image = "";
                    
                    },
                    destroy2(){
                    	this.form.step2_image = "";
                    
                    },
                    destroy3(){
                    	this.form.step3_image = "";
                    
                    },
                    destroy4(){
                    	this.form.step4_image = "";
                    
                    },
                    destroy5(){
                    	this.form.step5_image = "";
                    
                    },
                    destroy6(){
                    	this.form.step6_image = "";
                    
                    },
                    uploadBefore(file) {
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!isLt2M) {
                            this.$message.error('图片大小不能超过 2MB!');
                        }
                        return isLt2M;
                    },
                    //截止时间
                    end_at() {
                        if (this.form.end_at) {
                            this.form.end_at = moment(this.form.end_at).format('YYYY-MM-DD HH:mm:ss');
                        } else {
                            this.form.end_at = '';
                        }
                      
                    },
                    
                    //任务开始时间
                    start_at() {
                        if (this.form.start_at) {
                            this.form.start_at = moment(this.form.start_at).format('YYYY-MM-DD HH:mm:ss');
                        } else {
                            this.form.start_at = '';
                        }
                      
                    },
                    
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //更新
                    update() {
                        this.form._token = "{{csrf_token()}}";
                        this.$refs['form'].validate((valid) => {
                            if (!this.form.content) {
                                this.$refs.form.fields[3].error = "请填写需求描述";
                                return false;
                            }
                            
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.demand.update') }}", this.form, function (res) {
                                    if (res.code) {
                                        that.$message.error(res.msg);
                                    } else {
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose: () => {
                                                window.history.go(-1);
                                            }
                                        });
                                    }
                                }, 'JSON');
                            }
                        });
                    },
                }
            });
        })
    </script>
@endsection
